<template>
  <div style="line-height:1.8">
    <div v-if="qType!==-1" v-loading="qLoading">
      <div v-if="formattedArticleContent">
        材料：<br/>
        <div class="q-title" v-html="formattedArticleContent"/>
      </div>
      <div v-if="parsedQuestion">
        <div class="q-container">
          <div class="q-options" :style="optionsStyle">
            <div v-for="(parsed, qIndex) in parsedQuestion" :key="qIndex" class="q-content">
              <div class="q-title" v-html="parsed"></div>
              <div v-for="(item, index) in parsed.item" :key="index" class="q-item-contain">
                <span class="q-item-prefix">{{ item.prefix }}</span>
                <span v-html="item.content" class="q-item-content"></span>
              </div>
            </div>
          </div>
          <div v-if="questionPictureArray.length" class="q-image-container">
            <img v-for="(picture, index) in questionPictureArray" :key="index" :src="picture" alt="Question Image" class="q-image"/>
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="qType==2" v-loading="qLoading">
      <div class="q-title" v-html="question.title"/>
      <div class="q-container">
        <div class="q-options">
          <div class="q-content">
            <span :key="item.id" v-for="item in question.items" class="q-item-contain">
              <span class="q-item-prefix">{{item.prefix}}</span>
              <span v-html="item.content" class="q-item-content"></span>
            </span>
          </div>
        </div>
        <div v-if="questionPictureArray.length" class="q-image-container">
          <img v-for="(picture, index) in questionPictureArray" :key="index" :src="picture" alt="Question Image" class="q-image"/>
        </div>
      </div>
    </div>
    <div v-else-if="qType==3" v-loading="qLoading">
      <div class="q-title" v-html="question.title" style="display: inline;margin-right: 10px"/>
      <div class="q-container">
        <div class="q-options">
          <span>（</span>
          <span :key="item.id" v-for="item in question.items">
            <span v-html="item.content" class="q-item-content"></span>
          </span>
          <span>）</span>
        </div>
        <div v-if="questionPictureArray.length" class="q-image-container">
          <img v-for="(picture, index) in questionPictureArray" :key="index" :src="picture" alt="Question Image" class="q-image"/>
        </div>
      </div>
    </div>
    <div v-else-if="qType==4" v-loading="qLoading">
      <div class="q-title" v-html="question.title"/>
      <div class="q-container">
        <div class="q-options">
          <div class="q-content">
            <div class="q-title" v-html="question.title"/>
          </div>
        </div>
        <div v-if="questionPictureArray.length" class="q-image-container">
          <img v-for="(picture, index) in questionPictureArray" :key="index" :src="picture" alt="Question Image" class="q-image"/>
        </div>
      </div>
    </div>
    <div v-else-if="qType==5" v-loading="qLoading">
      <div class="q-title" v-html="question.title"/>
      <div class="q-container">
        <div class="q-options">
          <div class="q-content">
            <div class="q-title" v-html="question.title"/>
          </div>
        </div>
        <div v-if="questionPictureArray.length" class="q-image-container">
          <img v-for="(picture, index) in questionPictureArray" :key="index" :src="picture" alt="Question Image" class="q-image"/>
        </div>
      </div>
    </div>
    <div v-else>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionShow',
  props: {
    question: {
      type: Object,
      default: function () {
        return {}
      }
    },
    qLoading: {
      type: Boolean,
      default: false
    },
    qType: {
      type: Number,
      default: 0
    }
  },
  computed: {
    parsedQuestion () {
      try {
        // console.log('图片地址' + this.question.picture)
        if (this.question.textContent !== '') {
          let parsed = JSON.parse(this.question.textContent)
          for (let i = 0; i < parsed.length; i++) {
            console.log('图片地址' + this.question.picture)
            console.log('成功')
            parsed[i] = parsed[i].replace(/<下划线文本>(.*?)<\/下划线文本>/g, '<span class="custom-underline">$1</span>') + '<br/>'
            if (i < this.question.itemsAndIndex.length) {
              const th = this.question.itemsAndIndex[i].index
              if (this.question.itemsAndIndex[i].items && this.question.itemsAndIndex[i].items !== '[]') {
                let item = this.question.itemsAndIndex[i].items
                for (let j = 0; j < item.length; j++) {
                  parsed[i] = parsed[i] + '\t' + item[j].prefix + '\t:\t' + item[j].content + '\t'
                  parsed[i] = parsed[i] + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
                  if ((j + 1) % 2 === 0) {
                    parsed[i] = parsed[i] + '<br/>'
                  }
                }
              }
              parsed[i] = th + '.\t' + parsed[i]
            } else {
              parsed[i] = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + parsed[i]
            }
          }
          return parsed
        }
      } catch (error) {
        alert('Error parsing question.textContent:', error)
      }
      return null
    },
    formattedArticleContent () {
      if (this.question.articleContent) {
        let formattedContent = this.question.articleContent.replace(/<输入位置>(.*?)<\/输入位置>/g, '<span class="custom-underline">$1</span>')
        formattedContent = formattedContent.replace(/\n/g, '<br/>')
        return formattedContent
      }
      return ''
    },
    questionPictureArray () {
      if (this.question.picture) {
        return this.question.picture.split(',').map(url => url.trim())
      }
      return []
    },
    optionsStyle () {
      if (this.question.picture) {
        return { float: 'left', width: '70%' }
      }
      return { float: 'left', width: '100%' }
    }
  }
}
</script>

<style>
.custom-underline {
  position: relative;
  display: inline-block;
}

.custom-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 2px;
  background-color: currentColor;
}

.q-container {
  overflow: hidden; /* 清除浮动 */
}

.q-options {
  float: left;
  width: 70%; /* 根据需要调整宽度 */
}

.q-image-container {
  float: right;
  width: 25%; /* 根据需要调整宽度 */
  margin-top: 10px; /* 根据需要调整间距 */
}

.q-image {
  max-width: 100%;
  height: auto;
}
</style>
